<template>
	<view class="confirm">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">提交订单</block>
		</cu-custom>
		<view class="address-chose">
			<view class="address-now" v-if="addressHas">
				<view class="address-name choose-label">
					<text class="label-tips">
						收货人：{{address.name}}
					</text>
					<text class="name-icon" v-if="address.default">默认</text>
				</view>
				<view class="address-tel choose-label">
					<text class="label-tips">
						联系电话：{{address.tel}}
					</text>
				</view>
				<view class="address-ad choose-label" @tap="changeAddress('change')">
					<text class="label-tips choose-adds">
						收货地址：{{address.province}}{{address.city}}{{address.district}}{{address.detail}}
					</text>
					<text class="right-icon">></text>
					
				</view>
			</view>
			<view class="address-now" v-if="!addressHas">
				<view class="goAdd" @tap="goAdd('change')">添加收获地址</view>
			</view>
		</view>
		<view class="pay-info">
			<text class="pay-way">支付方式</text>
			<text class="way-name">积分兑换</text>
		</view>
		<view class="product-details">
			<view class="product-name">付加加积分商城</view>
			<view class="product-info">
				<image v-if="details.thumb" :src='details.thumb'></image>
				<view class="info-detail">
					<view class="info-name info-label">{{details.name}}</view>
					<view class="info-specifications  info-label">
						<text class="info-price">
							￥ {{details.money}}
						</text>
						<text class="info-num">
							* 1
						</text>
					</view>
				</view>
			</view>
			<view class="product-send">
				<text class="send-tips">配送</text>
				<text class="logistics-name">物流配送</text>
			</view>
		</view>
		<view class="note">
			<!-- <view class="uni-title uni-common-pl">备注</view> -->
			<view class="uni-textarea">
				<textarea @blur="bindTextAreaBlur" auto-height placeholder="备注 (50字以内)"/>
			</view>
		</view>
		<view class="confirm-action">
			<text class="goBacsk" @tap="goBack()">返回</text>
			<text class="takeSure" @tap="takeSure()">确认</text>
		</view>
		<!-- <my-show-model @getValue="changeTips" @getValues="goShare" v-if="openTips" :showModel="showModel"></my-show-model> -->
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import shops from '@/api/shop';
	import store from '@/api/store';
	export default {
		data() {
			return {
				details : {},
				address : {'province':'','city':'','district':'','district':'detail','name':'','tel':'','default':0},
				addressStatus:false,
				a_id:0,
				addressHas:true,
				pid:''
			}
		},
		computed: {
			...mapState(['config', 'hasLogin', 'userInfo','imgHost']),
		},
		methods: {
			bindTextAreaBlur: function (e) {
			    console.log(e.detail.value)
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			goAdd(type){
				uni.navigateTo({
				    url: '../my/shop/address?type='+ type
				});
			},
			changeAddress(type){
				uni.navigateTo({
				    url: '../my/shop/address?type=' + type
				});
			},
			async getDetails(pid) {
				let res = await shops.productDetails({
					pid: pid
				})
				if (res.code == 1) {
					this.details = res.data;
					console.log(res.data);
				}
			},
			async getDefault(){
				let res = await store.addressFau({});
				if(res.code == 1){
					if(!res.data){
						this.addressHas = false;
						return false;
					}else{
						this.a_id = res.data.id;
						this.address = res.data;
						this.addressStatus = true;
					}
				}else{
					this.addressStatus = false;
				}
			},
			async getChoosed(e){
				let res = await shops.getOnce({
					'address_id':e
				})
				if(res.code == 1){
					this.address['province'] = res.data.address[0];
					this.address['city'] = res.data.address[1];
					this.address['district'] = res.data.address[2];
					this.address['detail'] = res.data.detail;
					this.address['name'] = res.data.real_name;
					this.address['tel'] = res.data.phone;
					this.address['default'] = res.data.is_default;
					console.log(this.address.province);
					this.addressStatus = true;
					
				}else{
					this.addressStatus = false;
				}
				// console.log('dizhi=' + this.address['province']);
			},
			async takeSure() {
				console.log(this.a_id);
				if(!this.a_id){
					uni.showModal({
					    title: '提示',
					    content: '尚未填写收货地址!',
						showCancel:false,
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					return false;
				}
				let res = await shops.orderPro({
					pid: this.pid,
					address_id: this.a_id,
				})
				if (res.code == 1) {
					this.details = res.data;
					uni.navigateTo({
						url:'results?id='+ res.data.order_no
					});
					console.log(res.data);
				}else{
					uni.showModal({
					    title: '提示',
					    content: res.msg,
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				}
			}
		},
		onLoad: function(option) {
			if(option.pid&&option.pid!=undefined){
				this.pid = option.pid;
				this.getDetails(option.pid);
			}
			if(option.a_id&&option.a_id!=undefined){
				this.a_id = option.a_id;
			}
			console.log('aid='+this.a_id);
			if(this.a_id==0||this.a_id==undefined){
				this.getDefault();
			}else{
				this.getChoosed(this.a_id);
			}
		}
	}
</script>

<style lang="less">
	.confirm{
		background: rgb(239, 239, 239);
		padding-bottom: 10px;
		font-family: "SimHei";
		.address-chose{
			height: 230rpx;
			background:linear-gradient(rgb(255,66,64),rgb(255,145,145));
			padding: 0 25rpx;
			padding-top: 35rpx;
			.address-now{
				height: 197rpx;
				padding-top: 45rpx;
				background-color: #ffffff;
				border-radius: 10rpx 10rpx 0 0;
				.choose-label{
					height: 40rpx;
					line-height: 40rpx;
					padding: 0 35rpx;
					font-size: 30rpx;
					color: #3d3d3d;
					margin-bottom: 10rpx;
				}
				.address-name{
					.name-icon{
						height: 40rpx;
						width: 80rpx;
						text-align: center;
						line-height: 40rpx;
						display: inline-block;
						float: right;
						background-color: rgb(250,235,214);
						font-size: 24rpx;
						color: #fe7200;
						border-radius: 5rpx;
					}
				}

				.right-icon{
					float: right;
					// position: absolute;
					// right: 35rpx;
					// top: 0;
					font-size: 30rpx;
				}
				.goAdd{
					line-height: 197rpx;
					text-align: center;
					color: #333333;
				}
			}
		}
		.pay-info{
			margin: 0 25rpx;
			padding: 0 35rpx;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #ffffff;
			border-radius: 0 0 10rpx 10rpx;
			margin-bottom: 20rpx;
			text{
				font-family: "SimHei";
				font-size: 28rpx;
				color: #171717;
			}
			.way-name{
				float: right;
			}
		}
		.product-details{
			margin: 0 25rpx;
			height: 365rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 0 40rpx;
			font-family: 'Source Han Sans CN';
			font-size: 28rpx;
			margin-bottom: 20rpx;
			.product-name{
				height: 70rpx;
				line-height: 70rpx;
				color: #2d2c2c;
			}
			.product-info{
				height: 170rpx;
				padding:25rpx 0;
				border-top: 1rpx solid rgb(229,229,229);
				border-bottom: 1rpx solid rgb(229,229,229);
				image{
					height: 120rpx;
					width: 145rpx;
					float: left;
					margin-right: 25rpx;
				}
				.info-detail{
					height: 120rpx;
					color: #171717;
					display: inline-block;
					font-weight: 500;
					.info-label{
						height: 50rpx;
						line-height: 50rpx;
					}
					.info-name{
						margin-bottom: 20rpx;
					}
					.info-price{
						margin-right: 50rpx;
					}
				}
			}
			.product-send{
				height: 120rpx;
				line-height: 120rpx;
				color: #171717;
				font-size: 28rpx;
				.logistics-name{
					float: right;
				}
			}
		}
		.note{
			margin: 0 25rpx;
			height: 150rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			.uni-textarea{
				text-indent: 1em;
				font-size: 28rpx;
			}
		}
		.confirm-action{
			font-family: "SimHei";
			font-size: 35rpx;
			color: #ffffff;
			width: 100vw;
			text-align: center;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 1;
			text{
				width: 50%;
				display: inline-block;
				height: 100rpx;
				line-height: 100rpx;
			}
			.goBacsk{
				background-color: rgb(28,28,28);
			}
			.takeSure{
				background-color: rgb(247,19,12);
			}
		}
	}
</style>
